<template>
  <div class="getProductContent">
    <el-container style="max-height:360px">
      <el-aside width="195x">
        <LeftClassification :tabs-text="tabsText" :is-commonly-used="isCommonlyUsed" :get-url="getUrl" @classificationClist="getClassificationId" @tabsVales="handleTabs" />
      </el-aside>
      <el-main>
        <div>
          <el-input v-model="search" class="el-select-y" placeholder="请输入名称和拼音码" style="width: 30%;margin-bottom:18px" @input="searchData" />
          <div v-if="tabsBool === '套餐'">
            <el-table ref="multipleTable" v-loading="loading" :data="tableData" style="width: 100%" border :row-class-name="tableColor" @select="handleSelect" @select-all="handleSelectAll">
              <el-table-column label="名称" prop="dataName" :show-overflow-tooltip="true" />
              <!-- <el-table-column prop="pinyinCode" label="拼音码" :show-overflow-tooltip="true" /> -->
              <el-table-column prop="price" label="套餐价格" :show-overflow-tooltip="true" />
              <el-table-column prop="stopData" label="操作" type="selection" width="120">
                <template slot-scope="scoped">
                  <el-checkbox v-model="scoped.row.aa" style="margin-right: 10px" @change="handleSelect($event, scoped.row)" />
                  <el-button type="text" @click="seeDetails(scoped.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="tabsBool === '项目' || tabsBool === '物品' || tabsBool === '药品'" :key="1">
            <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%" border :row-class-name="tableColor" @select="handleSelect" @select-all="handleSelectAll">
              <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
              <!-- <el-table-column prop="pinyinCode" label="拼音码" :show-overflow-tooltip="true" /> -->
              <el-table-column v-if="tabsBool === '项目'" prop="projectDuration" label="属性" :show-overflow-tooltip="true" />
              <el-table-column v-if="tabsBool === '物品' || tabsBool === '药品'" prop="spec" label="规格" :show-overflow-tooltip="true" />
              <el-table-column v-if="tabsBool === '项目'" prop="specifications" label="规格" :show-overflow-tooltip="true" />
              <el-table-column prop="unit" label="单位" :show-overflow-tooltip="true" />
              <el-table-column v-if="tabsBool === '项目'" prop="usageTimes" label="使用次数" :show-overflow-tooltip="true" />
              <el-table-column :prop="tabsBool === '物品'||tabsBool === '药品'?'sellPrice':'price'" label="售价" :show-overflow-tooltip="true" />
              <el-table-column type="selection" label="操作" width="100" />
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog width="40%" title="套餐详情" :visible.sync="innerVisible" append-to-body>
      <mealDetails :details-id="detailsId" />
    </el-dialog>
  </div>
</template>
<script>
import mealDetails from "@/components/mealDetails";
import LeftClassification from "@/components/leftClassification";
import { tableColor } from '@/utils/common.js';
export default {
  name: 'GetProductContent',
  components: {
    LeftClassification,
    mealDetails,
  },
  props: {
    tabsText: {
      type: Array,
      default: () => [],
    },
    getUrl: {
      type: String,
      default: undefined,
    },
    warehouseId: {
      type: String,
      default: undefined,
    },
    isCommonlyUsed: {
      type: Boolean,
      default: false,
    },
    inventory: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {
      tableColor,
      searchVal: {},
      loading: false,
      tabsBool: this.tabsText[0].label || '',
      tableDataList: [],
      tableData: [],
      selectTables: [],
      detailsId: '',
      innerVisible: false,
      search: "",
    };
  },
  watch: {
    selectTables: {
      handler(val) {
        this.$emit("listChange", val);
      },
      deep: true,
    },
    warehouseId: {
      handler(val) {
        if (!this.inventory) {
          this.searchVal.warehouseId = this.warehouseId;
          const idList = [];
          for (let i = 0; i < this.selectTables.length; i++) {
            const item = this.selectTables[i];
            if (item.productAttrib === "物品类" || item.productAttrib === "药品类") {
              idList.push(item.id);
            }
          }
          idList.forEach(id => {
            this.deteleContent(id);
          });
          if (this.searchVal.productClassificationId) {
            this.interfaceHandle();
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    getClassificationId(val) {
      this.searchVal.productClassificationId = val.list.join(",");
      this.interfaceHandle();
    },
    async interfaceHandle() {
      if (this.inventory) {
        this.searchVal.inventory = this.inventory;
      } else if (!this.warehouseId) {
        this.$message.error("请选择仓库");
        this.tableData = [];
        return;
      }
      this.searchVal.warehouseId = this.warehouseId;
      this.loading = true;
      let url = "";
      let msg = "";
      if (!this.tabsBool) this.tabsBool = this.tabsText[0].label;
      if (this.tabsBool === '套餐') {
        this.searchVal.classifyId = this.searchVal.productClassificationId;
        url = "doctor/consulting/comboList";
        msg = "查询套餐列表";
      } else if (this.tabsBool === '项目') {
        url = "doctor/consulting/productList";
        msg = "查询项目列表";
      } else if (this.tabsBool === '物品' || this.tabsBool === '药品') {
        url = "data/drugs/drugsList";
        msg = "查寻物品列表";
      }
      const res = await this.$api[url]({ query: this.searchVal });
      this.loading = false;
      if (res.code !== 200) return this.$message.error(msg + "失败!");
      this.tableDataList = [];
      res.data.forEach(item => {
        this.$set(item, "productAttrib", this.tabsBool + '类');
        this.tableDataList.push(item);
      });
      this.tableData = JSON.parse(JSON.stringify(this.tableDataList));
      if (this.selectTables.length > 0) {
        this.$nextTick(function() {
          this.tableData.forEach(item => {
            this.selectTables.forEach(json => {
              if (item.id === json.id || item.id === json.projectId) {
                this.$refs.multipleTable.toggleRowSelection(item, true);
                this.$set(item, 'aa', true);
              }
            });
          });
        });
      }
      // this.$message.success(msg + "成功");
    },
    handleTabs(val) { // 切换tabs
      this.tableData = [];
      this.tabsText.forEach(item => {
        if (item.name === val) {
          this.tabsBool = item.label;
        }
      });
    },
    handleSelect(event, row) {
      let isExistence = false;
      this.selectTables.forEach((item, index) => {
        if (item.id === row.id) {
          isExistence = true;
          this.selectTables.splice(index, 1);
        }
        if (item.comboId === row.id) {
          isExistence = true;
          this.selectTables.splice(index, 1);
        }
      });
      if (!isExistence) {
        const json = JSON.parse(JSON.stringify(row));
        this.$set(json, "aa", false);
        this.selectTables.push(json);
      }
    },
    handleSelectAll(selection) {
      if (selection.length > 0) {
        selection.forEach((item) => {
          let isExistence = false;
          this.selectTables.forEach((json) => {
            if (json.id === item.id) {
              isExistence = true;
            }
          });
          if (!isExistence) {
            this.$set(item, "aa", true);
            this.selectTables.push(JSON.parse(JSON.stringify(item)));
          }
        });
      } else {
        this.tableData.forEach((item) => {
          this.selectTables.forEach((json, index) => {
            if (json.id === item.id) {
              this.$set(item, 'aa', false);
              this.selectTables.splice(index, 1);
              index--;
            }
          });
        });
      }
    },
    seeDetails(row) {
      // 查看详情
      this.detailsId = row.id;
      this.innerVisible = true;
    },
    searchData(search) {
      // 表格顶部的搜索框
      if (search) {
        if (!this.tableDataList || this.tableDataList.length === 0) return;
        this.tableData = [];
        this.tableDataList.forEach((item) => {
          if (this.tabsBool === "套餐") {
            if (!item.dataName || !item.pinyinCode) return false;
            if (
              item.dataName.indexOf(search) > -1 ||
              (item.pinyinCode && item.pinyinCode.indexOf(search) > -1)
            ) { this.tableData.push(item); }
          } else {
            if (!item.name || !item.pinyinCode) return false;
            if (
              item.name.indexOf(search) > -1 ||
              (item.pinyinCode && item.pinyinCode.indexOf(search) > -1)
            ) { this.tableData.push(item); }
          }
        });
      } else {
        this.tableData = JSON.parse(JSON.stringify(this.tableDataList));
      }
    },
    deteleContent(id) { // 删除已选中的数据
      this.selectTables.forEach((item, i) => {
        if (item.id === id) {
          this.selectTables.splice(i, 1);
        }
      });
      this.tableData.forEach((row) => {
        if (id === row.id) {
          this.$refs.multipleTable.toggleRowSelection(row, false);
          row.aa = false;
        }
      });
      return this.$message.success("已删除成功");
    },
    addContentList(list) { // 回显已选中的数据
      if (list) {
        this.selectTables = JSON.parse(JSON.stringify(list));
      }
      this.tableData = [];
      this.tableDataList = [];
      this.$nextTick(function() {
        this.tabsBool = this.tabsText[0].label;
        // this.getClassificationId();
      });
    },
  },
};
</script>
<style scoped>
.GetProductContent{
  max-height: 360px;
}
</style>
